import React from 'react'
import {
    Form,
    Input,
    Button,
    Dialog,
    NavBar,
    Toast
} from 'antd-mobile'
import "./register.css"
import { useNavigate } from "react-router-dom"
import { GetCode } from '../api/code'
import { GetRegister } from '../api/register'
import { useState } from 'react'
function Register() {
    let navigate = useNavigate()
    const back = () => {
        Toast.show({
            content: '返回到登录页',
            duration: 1000,
        })
        navigate('/')
    }
    let [form, setForm] = useState({
        name: '',
        email: "",
        verification_code: "",
        password: "",
        repassword: ""
    })
    async function handlecode() {
        if (form.email) {
            try {
                let code = await GetCode({
                    email: form.email
                })
                console.log(code, "code")
                Toast.show({
                    content: '获取验证码成功',
                    duration: 1000,
                    icon: 'success'
                })
            }
            catch {
                Toast.show({
                    content: '邮箱发送失败',
                    duration: 1000,
                    icon: 'fail'
                })
            }

        }
        else {
            Toast.show({
                content: '请输入邮箱',
                duration: 1000,
                icon: 'fail'
            })
        }
    }
    async function REGISTER() {
        try {
            let registerData = await GetRegister({ ...form })
            if (registerData.data.code == 200) {
                navigate('/')
                Toast.show({
                    content: '注册成功',
                    duration: 1000,
                    icon: 'success'
                })
            }
            console.log(registerData, "registerData")

        }
        catch {
            Toast.show({
                content: '注册失败',
                duration: 1000,
                icon: 'fail'
            })
        }
    }
    return (
        <div>

            <NavBar onBack={back}>标题</NavBar>


            <Form
                layout='horizontal'
                footer={
                    <Button block type='submit' color='primary' size='large' onClick={REGISTER} >
                        确认登录
                    </Button>
                }
            >
                <Form.Header> <h1>注册</h1></Form.Header>
                <Form.Item
                    name='name'
                    label='姓名'
                    rules={[{ message: '姓名不能为空' }]}
                >
                    <Input onChange={(e) => { setForm({ ...form, name: e }) }} placeholder='请输入姓名' />
                </Form.Item>
                <Form.Item name='address' label='邮箱地址' rules={[{ required: true, message: '邮箱不能为空' }]}  >
                    <Input onChange={(e) => { setForm({ ...form, email: e }) }} placeholder='请输入邮箱地址' />
                </Form.Item>
                <Form.Item name='code' label='密码'>
                    <Input onChange={(e) => { setForm({ ...form, password: e }) }} placeholder='请输入密码' type='password' />
                </Form.Item>
                <Form.Item name='reqcode' label='确认密码'>
                    <Input onChange={(e) => { setForm({ ...form, repassword: e }) }} placeholder='请确认密码' type='password' />
                </Form.Item>

                <Form layout='horizontal' >

                    <Form.Item label='短信验证码' extra={<a onClick={handlecode} >发送验证码</a>}  >
                        <Input placeholder='请输入' onChange={(e) => setForm({ ...form, verification_code: e })} />
                    </Form.Item>
                </Form>
            </Form>


        </div>
    )
}
export default Register